<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fragment 2</title>
  <link rel="stylesheet" href="styles/main.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
  <!-- features -->
  <div class="features">
    <div class="container">
      <div class="title">
        <h2>About us</h2>
        <p>Read about our app</p>
      </div>
      <div class="cards">
        <div class="item">
          <img src="img/icon1.svg" alt="Overview">         
          <h3>Overview</h3>
          <p>Brute laoreet efficiendi id his, ea illum nonumes luptatum pro.</p>
        </div>
        <div class="item">
          <img src="img/icon2.svg" alt="Files">     
          <h3>Files</h3>
          <p>No vim nulla vitae intellegat. Ei enim error ius, solet atomorum conceptam ex has.</p>
        </div>
        <div class="item">
          <img src="img/icon3.svg" alt="Meeting chats">                         
          <h3>Meeting chats</h3>
          <p>Vim ne tacimates neglegentur. Erat diceret omittam at est.</p>
        </div>
        <div class="item">
          <img src="img/icon4.svg" alt="Save events">                       
          <h3>Save events</h3>
          <p>Nisl idque mel ea, nominati voluptatum.</p>
        </div>
      </div>
      <div class="buttons">
        <a href="#" class="buttons-readmore">Read more</a>
        <a href="#" class="buttons-getstarted">Get started</a>
      </div>
    </div>
  </div>
  <!-- stats -->
  <div class="stats">
    <div class="container">
      <div class="stats-inner">
        <div class="stats-left">
          <img src="img/icon5.svg" alt="Customers">
          <p>89%</p>
          <p>Customers who have increased their productivity</p>      
        </div>
        <div class="stats-right">
          <img src="img/icon6.svg" alt="Users">
          <p>3123</p>
          <p>Users who have used our application</p>          
        </div>
      </div>
    </div>
  </div>
  <!-- blog -->
  <div class="blog">
    <div class="container">
      <div class="title">
        <h2>Our resources</h2>
        <p>Start reading our blog</p>
      </div>
      <div class="blog-inner">
        <div class="blog-gallery">
          <div class="image-1"></div>
          <div class="image-2"></div>
          <div class="image-3"></div>
        </div>
        <div class="blog-text">
          <h3>How to start planning</h3>
          <p>Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea. Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...</p>
          <div class="buttons">
            <a href="#" class="buttons-getstarted">Read now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>